<template>
    <el-card class="h100 ovy" style="flex: 1">
        <div class="pgh">
            <el-page-header @back="$router.go(-1)" :content="'权限设置'">
            </el-page-header>
        </div>

        <div>
            <div class="tree"
                v-loading="loading"
            >
                <el-scrollbar>
                    <el-tree
                            :data="data"
                            show-checkbox
                            node-key="id"
                            ref="tree"
                            :props='{"label":"text"}'
                            :default-expand-all="true">
                    </el-tree>
                </el-scrollbar>

            </div>

            <div>
                <el-button type="primary" @click="save()">保存关闭</el-button>

            </div>
        </div>

    </el-card>
</template>
<script>
    import $ from "jquery";
    export default  {
        data(){
            return{
                loading:true,
                mode:"",
                data: []
            }
        },
        mounted(){
            // 获取菜单与默认菜单
            $.get("/menu/menu", json => {

                // console.log(json)
                this.data = json.data
                $.get("/menu/getRoleAllowMenu",{id:this.$route.query.id}, json => {
                    this.loading = false;
                    let checked = []
                    this.$refs.tree.setCheckedKeys(this.getItem(this.data,json.data.list).flat())

                }, "json") ;
            }, "json") ;

        },
        methods:{
            getItem(data,json){
                let list = []
                data.forEach(val=>{
                    if(val.children){
                        list.push(this.getItem(val.children,json).flat())
                    }else{
                        // json.forEach(js=>{
                        //     if(val.id == js){
                        //         console.log(val.text)
                        //     }
                        // })
                        // console.log(val.text)
                        json.forEach(v => {
                            if(val.id == v){
                                list.push(val.id)
                            }
                        })
                        return list.flat()
                    }
                })
                return list;
            },
            getParent(id){
                var node = this.$refs.tree.getNode(id)

                let list = []
                list.push(node.key)
                if(node.parent.key != null){
                    list.push(this.getParent(node.parent.key))
                    return list.flat()
                }else{
                    return list.flat()
                }
                  // list.forEach(val=>{
                  //     if(val.pid != null){
                  //
                  //     }
                  // })
            },
            save(){
                this.loading = true;
                let list = []
                this.$refs.tree.getCheckedNodes().forEach((val)=>{
                    if(val.pid != null){
                        list.push(this.getParent(val.id).flat())

                    }
                })

                let id = this.$route.query.id
                let newList = []
                for(let i = 0; i < list.flat().length; i++) {
                    if(newList.indexOf(list.flat()[i]) < 0) {
                        newList.push(list.flat()[i])
                    }
                }
                let listJson = JSON.stringify(newList)
                // console.log(newList)
                $.post("/menu/menuAuthority",{"list":listJson,"id":id}, json => {
                    this.loading = false;
                    // console.log(json)
                    this.$router.go(-1)
                    // this.data = json.data
                });
                // this.loading = true;
                // this.$router.go(-1)
            }
        }
    }
</script>
<style lang="less">
    .tree{
        height:80vh;
        overflow: auto;
        .el-scrollbar{
            height:100%
        }
        .el-scrollbar__wrap{
            overflow-x: hidden;
        }
    }
</style>